<template>
	<view>
		<view class="selectWrapper" style="background-color: #fff;">
			<view v-for="(item,index) in marKeyMap" :key="index" @click="onSelectType(index)"
				:class="markerType==index?'item':'itemDis'">
				{{item}}
				<view class="bottom">
				</view>
			</view>
		</view>
		<!--绑定点击事件-->
		<!-- <button bindtap="nearby_search">搜索周边KFC</button> -->
		<!--地图容器-->
		<map id="myMap" :markers="markers" class="mapperWrapper" :show-location="true"
			:longitude="shopInfo.location.longitude" :latitude="shopInfo.location.latitude" :scale='mapScale'>
			<cover-view slot="callout" class="makerWrapper" :class="{homeMaker:(item.markerType==1000)}" :key="item.id"
				:style="{width:  item.markerType!=1000? ((item.title.length*22) + 'rpx'):  (60 + item.title.length*22) + 'rpx'}"
				:marker-id="item.id" v-for="(item,index) in markers">
				<!-- <cover-image class="icon" v-if="item.markerType==0"  src="/pages/client/static/image/icon_school.png"></cover-image>             
                <cover-image class="icon" v-if="item.markerType==1"  src="/pages/client/static/image/icon_hospital.png"></cover-image>
                <cover-image class="icon" v-if="item.markerType==2" src="/pages/client/static/image/icon_bag.png"></cover-image>
                <cover-image class="icon" v-if="item.markerType==3" src="/pages/client/static/image/icon_bus.png"></cover-image> -->
				<cover-image class="icon" v-if="item.markerType==1000"
					src="/pages/shop/static/image/icon_house.png"></cover-image>
				<cover-view>
					{{item.title}}
				</cover-view>
			</cover-view>
		</map>

		<share-button :backgroundBtn="'#5E9FFD'" @onShare="onShare"></share-button>
	</view>
</template>

<script>
	const api = require("@/static/js/api.js")
	const utils = require("@/static/js/utils.js")
	import {
		mapState,
		mapMutations,
		mapActions
	} from 'vuex';
	let that = null
	var QQMapWX = require('@/static/js/qqmap-wx-jssdk.min.js');
	var qqmapsdk = null;
	var mapKey = "ICTBZ-YIXC3-77C3B-YEQZQ-LK6TE-33BWM"

	export default {
		data() {
			return {
				mapScale: 12,
				markersList: [],
				markers: [],
				markerType: 0,
				marKeyMap: [],
				detailObj: {},
			};
		},

		computed: {
			...mapState({
				hasLogin: state => state.userInfo.hasLogin,
				isAuthPhone: state => state.userInfo.isAuthPhone,
				isAuthUserInfo: state => state.userInfo.isAuthUserInfo,
				isSeller: state => state.userInfo.isSeller,
				sellerObj: state => state.userInfo.sellerObj,
				buyerObj: state => state.userInfo.buyerObj,
				shopInfo: state => state.userInfo.shopInfo,
			}),
		},
		components: {

		},
		onLoad(options) {
			that = this;
			// 实例化API核心类
			qqmapsdk = new QQMapWX({
				key: mapKey,
			});
			that.getNearByServer()
			that.shareTitleMixins = "周边配套"
		},
		onShow() {

		},
		methods: {
			...mapMutations(['setUserInfo', 'setLoginStatus', 'setUserId', "setOrigin"]),

			onSelectType(index) {
				that.markerType = index;
				that.showSelectNear();
				// that.getNearByServer();
			},
			getNearByServer() {

				api.getProjectTraffic({
					param: {

					}
				}).then(res => {
					console.log(res)
					if (res.success) {
						that.markersList = res.data;
						for (var i = 0; i < that.markersList.length; i++) {
							that.marKeyMap.push(that.markersList[i].name);
						}
						that.showSelectNear();
					}
				})
			},
			showSelectNear() {

				var mks = []
				that.markers.splice(0, that.markers.length)
				var list = that.markersList[that.markerType].list
				console.log(list)
				that.mapScale = that.markersList[that.markerType].zoom || 12
				if (list && list.length > 0) {
					for (var i = 0; i < list.length; i++) {
						that.markers.push({ // 获取返回结果，放到mks数组中
							title: list[i].name,
							id: 1 + i, //
							latitude: list[i].latitude,
							longitude: list[i].longitude,
							iconPath: "/pages/shop/static/image/icon_map_shop.png", //图标路径
							width: 20,
							height: 23,
							display: true,
							markerType: 0,
							callout: {
								content: list[i].name,
								color: '#ffffff',
								bgColor: '#5E9FFD',
								display: 'ALWAYS',
								fontSize: 12,
								borderRadius: 15,
								padding: 5,
							},
							customCallout: {
								display: 'ALWAYS',
							}
						})
					}

				}

				that.markers.push({
					title: that.shopInfo.name,
					id: 0,
					latitude: that.shopInfo.location.latitude,
					longitude: that.shopInfo.location.longitude,
					iconPath: "/pages/shop/static/image/icon_map_own.png", //图标路径
					width: 20,
					height: 23,
					display: true,
					markerType: 1000,
					customCallout: {
						display: 'ALWAYS',
					}
				})

			},

			nearby_search: function() {
				var _this = this;
				var location = that.shopInfo.location.latitude + ',' + that.shopInfo.location.longitude
				// 调用接口
				qqmapsdk.search({
					keyword: that.marKeyMap[that.markerType], //搜索关键词
					location: location, //设置周边搜索中心点
					success: function(res) { //搜索成功后的回调
						var mks = []
						that.markers.splice(0, that.markers.length)

						for (var i = 0; i < res.data.length; i++) {
							that.markers.push({ // 获取返回结果，放到mks数组中
								title: res.data[i].title,
								id: 1 + i, //res.data[i].id,
								latitude: res.data[i].location.lat,
								longitude: res.data[i].location.lng,
								iconPath: "/pages/client/static/image/icon_map_shop.png", //图标路径
								width: 20,
								height: 23,
								display: true,
								markerType: that.markerType,
								callout: {
									content: res.data[i].title,
									color: '#ffffff',
									bgColor: '#5E9FFD',
									display: 'ALWAYS',
									fontSize: 12,
									borderRadius: 15,
									padding: 5,
								},
								customCallout: {
									display: 'ALWAYS',
								}
							})
						}
						that.markers.push({
							title: that.shopInfo.name,
							id: 0,
							latitude: that.shopInfo.location.latitude,
							longitude: that.shopInfo.location.longitude,
							iconPath: "/pages/client/static/image/icon_map_own.png", //图标路径
							width: 20,
							height: 23,
							display: true,
							markerType: 1000,
							customCallout: {
								display: 'ALWAYS',
							}
						})
					},
					fail: function(res) {
						console.log(res);
					},
					complete: function(res) {
						console.log(res);
					}
				});
			}

		}
	}
</script>


<style lang="scss">
	.mapperWrapper {
		width: 750rpx;
		height: calc(100vh - 100rpx - env(safe-area-inset-bottom) - 122rpx);
		position: fixed;
		top: 100rpx;
		left: 0;
	}

	.selectWrapper {
		width: 750rpx;
		background-color: #FFFFFF;
		display: flex;
		justify-content: space-around;
		align-items: center;
		height: 120rpx;
		position: relative;
		z-index: 100;

		.item {
			font-size: 30rpx;
			color: #5E9FFD;
			line-height: 42rpx;
			display: flex;
			align-items: center;
			flex-direction: column;

			.bottom {
				width: 30rpx;
				height: 6rpx;
				background: #5E9FFD;
				border-radius: 3rpx;
				margin-top: 10rpx;
			}
		}

		.itemDis {
			font-size: 30rpx;
			color: #333333;
			line-height: 42rpx;

			.bottom {
				width: 30rpx;
				height: 6rpx;
				background: #FFFFFF;
				border-radius: 3rpx;
				margin-top: 10rpx;
			}
		}
	}

	.makerWrapper {
		padding: 0 15rpx;
		height: 54rpx;
		background: #5E9FFD;
		border-radius: 27rpx;
		font-size: 22rpx;
		color: #FFFFFF;
		display: flex;
		align-items: center;
		justify-content: center;

		.icon {
			width: 40rpx;
			height: 40rpx;
			margin-right: 5rpx;
		}
	}

	.homeMaker {
		background-color: #ff0037;
	}

	.bottomContainer {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 750rpx;
		height: 122rpx;
		background: #FFFFFF;
		display: flex;
		justify-content: center;
		align-items: center;
		border-top: #F3F3F3 1px solid;
		box-sizing: content-box;
		padding-bottom: env(safe-area-inset-bottom);
		z-index: 99999;

		.container {
			width: 500rpx;
			height: 74rpx;
			border-radius: 37rpx;
			font-size: 28rpx;
			color: #FFFFFF;
			display: flex;
			justify-content: center;
			align-items: center;
			background-color: #5E9FFD;

			.icon {
				width: 40rpx;
				height: 40rpx;
				margin-right: 15rpx;
			}
		}
	}
</style>